<template>
  <div class="treeconbox">
    <!-- 使用 TDesign Tree 组件 -->
    <t-tree
      :data="treeData"
      hover
      activable
      @edit-click="onEditClick"
      :expand-level="1"
      expandOnClickNode="true"
    >
      <template #operations="{ node }">
        <div v-if="node.data.children">
          <dk-button
            v-if="node.label !== '默认分组'"
            type="textPrimary"
            size="small"
            variant="base"
            @click.stop="append(node)"
          >
            <icon-svg
              style="width: 18px; height: 18px"
              name="icon-AddRectangle"
            ></icon-svg>
          </dk-button>
        </div>

        <dk-button
          v-if="node.label !== '全部' && node.label !== '默认分组'"
          type="textPrimary"
          size="small"
          variant="outline"
          @click.stop="emitEditClick(node)"
        >
          <icon-svg
            style="width: 14px; height: 14px"
            name="icon-icon编辑"
          ></icon-svg>
        </dk-button>
        <dk-button
          v-if="node.label !== '全部' && node.label !== '默认分组'"
          type="textPrimary"
          size="small"
          variant="base"
          @click.stop="remove(node)"
        >
          <icon-svg
            style="width: 14px; height: 14px"
            name="icon-icon删除"
          ></icon-svg>
        </dk-button>
      </template>
    </t-tree>
  </div>
  <t-dialog
    :header="judgment == 'add' ? '创建子级分组' : '编辑分组'"
    :visible="dialogVisible"
    :on-close="close"
    :on-confirm="confirmation"
  >
    <template #body>
      <div>
        <t-input v-model="inputValue" placeholder="请输入内容"></t-input>
      </div>
    </template>
  </t-dialog>
  <t-dialog
    v-model:visible="deletevisible"
    theme="warning"
    header="警示"
    body="是否确认删除当前分组与分组下的全部内容（含知识点与下级分组）"
    @confirm="onClickConfirm"
    width="500px"
  >
    <template #footer>
      <!-- 全部删除按钮 -->
      <dk-button style="margin-right: 10px" type="warning" @click="deleteAll"
        >全部删除</dk-button
      >

      <!-- 保留知识点至默认分组按钮 -->
      <dk-button
        style="margin-right: 10px"
        type="outlineWarning"
        @click="keepDefault"
        >保留知识点至默认分组</dk-button
      >

      <!-- 取消按钮 -->
      <dk-button type="grey" @click="cancelDialog">取消</dk-button>
    </template>
  </t-dialog>
</template>
  
  <script setup lang="jsx">
import { ref } from 'vue';
import { treeData } from '../formcolumn/knowledgeBase';
//   弹窗内容回显
const inputValue = ref('');
// 判断创建编辑
const judgment = ref('');
  
  
  // 用于存储当前正在编辑的节点
  const editingNode = ref(null);
  const dialogVisible = ref(false);
  const deletevisible = ref(false);
  
  // 创建子级分类
  const append = (node) => {
    //   console.log(node);
      judgment.value = 'add'
      inputValue.value = '';
      dialogVisible.value = true;
  }
  
  // 点击编辑按钮时，触发编辑功能
  const emitEditClick = (node) => {
    // console.log(node);
    judgment.value = 'edit'
    inputValue.value = node.label;
    dialogVisible.value = true;
    // onEditClick(node);
  };
  
  // 删除分组
  const remove = (node) => {
    deletevisible.value = true;
  };


//   关闭弹窗
  const close = () => {
      console.log('关闭');
      dialogVisible.value = false;
  }

//  弹窗确认
const confirmation = () => {
  console.log('确认');
  dialogVisible.value = false;
}

// 删除弹窗 全部删除
const deleteAll = () => {
    console.log('全部删除');
    deletevisible.value = false;
}
// 删除弹窗 只删除分组 
const keepDefault = () => {
    console.log('删除分组');
    deletevisible.value = false;
}
// 删除弹窗 关闭 
const cancelDialog = () => {
    console.log('关闭');
    deletevisible.value = false
}

  </script>
  

  <style lang="scss" scoped>
:deep(.t-tree__operations) {
  margin-left: 0;
}
.treeconbox {
  height: 100%;
  overflow-y: scroll;
}
/* 隐藏滚动条 */
.treeconbox::-webkit-scrollbar {
  display: none;
}

/* Firefox 浏览器 */
.treeconbox {
  scrollbar-width: none;
}

/* IE 和 Edge 浏览器 */
.treeconbox {
  -ms-overflow-style: none;
}
</style>